// Bootstrap
@import '~bootstrap/scss/bootstrap-reboot';
//@import '~bootstrap/scss/utilities';
// Element
@import '~element-ui/lib/theme-chalk/index.css';
@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.snow.css';

.el-container.tree-container {
  min-height: 100vh;
}

.el-header.tree-header {
  border-bottom: 2px solid rgb(238, 241, 246);
  color: #333;
  line-height: 60px;
  text-align: right;
}

.el-aside.tree-aside {
  color: #333;
  background-color: rgb(238, 241, 246);
}

.el-tag + .el-tag {
  margin-left: 5px;
}

.w-full {
  width: 100%;
}

.editor-container {
  overflow: hidden;
}

.editor-container {
  position: relative;
}

.step {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 15px;
}

.step-num {
  position: absolute;
  top: -10px;
  /*left: -10px;*/
  line-height: 24px;
  font-size: 24px;
  color: #909399;
  user-select: none;
}

.step.add {
  width: 100%;
}

$box-color: rgb(140, 197, 255);
.box {
  position: relative;
  z-index: 2;
  height: 80px;
  width: 200px;
  padding: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
}

.box-normal {
  border: 1px solid $box-color;
  background: #fff;
}

.button-new-tag {
  visibility: hidden;
}

.step:hover {
  background: #eee;
}

.step:hover .button-new-tag {
  visibility: visible;
}

.el-tag + .button-new-tag {
  margin-left: 5px;
}

.box:focus {
  background: $box-color;
  color: #fff;
}

.box:hover {
  border-color: $primary;
}

.box .fixed-bottom {
  position: absolute;
  width: 100%;
  bottom: 5px;
}

.box .node-text {
  user-select: none;
}

.el-form-item__content .quill-editor {
  line-height: 20px;
  position: relative;
}

.auto-complete {
  li {
    line-height: normal;
    padding: 7px;

    .title {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .description {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .description {
      color: #ddd;
    }
  }
}